<template>
	<view class="cu-page index-page">
		<!-- <nav-bar :hideBack="true" :scrollTop="scrollTop" title="星图壁纸" :transparent="true">
			<image class="logo-box-image" mode="aspectFit" slot="left" src="/static/logo.png"></image>
		</nav-bar>
		<view class="__bdi">
			aaa
		</view> -->
		<view class="top-empty"></view>
		<header-title :showOption="false" title="精彩推荐" titleIcon="../../static/icons/jingxuan.png" ></header-title>
		<scroll-view class="album-srcoll-container" :scrollX="true" v-if="homeList.albumList.length != 0">
			<view class="album-item" @tap="toPage('../wallpaperList/albumwallpaperList')" v-for="(item,index) in (homeList.albumList)" :key='index'>
				<image class="album-cover-image" mode="aspectFill" :src="item.banner_list&&item.banner_list.length>0?item.banner_list[0]:item.cover_url"></image>
				<text class="album-title cu-text-ellipsis">{{item.name}}</text>
				<text class="album-content u-line-2">{{item.content||item.introduce}}</text>
				<view class="album-user-box">
					<view class="album-user-avatar">
						<image mode="aspectFill" :src="item.current_like_list[0]&&item.current_like_list[0].avatar?item.current_like_list[0].avatar:'../../static/logo.png'"></image>
					</view>
					 <view class="album-user-avatar">
						<image mode="aspectFill" :src="item.current_like_list[1]&&item.current_like_list[1].avatar?item.current_like_list[1].avatar:'../../static/logo.png'"></image>
					</view>
					<view class="album-user-avatar">
						<image mode="aspectFill" src="/static/icons/more.png"></image>
					</view>
					<text class="album-user-tips cu-text-ellipsis">{{'等 '+(item.like_num||0)+' 人喜欢它'}}</text>
				</view>
			</view>
		</scroll-view>
		<header-title  optionIcon="../../static/icons/leaf.png" subtitle="每一张都是精心挑选" title="最新精选" @tap="toPage('../wallpaperList/chosenList')"></header-title>
		<image-scroll-view :list="homeList.chosenWallpaper"></image-scroll-view>
		<header-title  optionIcon="../../static/icons/fire.png" subtitle="实时更新今日受欢迎壁纸" title="今日热门"></header-title>
		<row-image-list :list="homeList.todayHot"></row-image-list>
		<header-title  optionIcon="../../static/icons/computer.png" optionText="更多宽屏" subtitle="电脑平台专用" title="电脑宽屏"></header-title>
		<!-- name 很重要 -->
		
		<u-swiper autoplay="false" bgColor="#141414" effect3d="true" :height="swiperheight" :list="homeList.landscapeList" mode="none" name="url"></u-swiper>
		
		<header-title optionIcon="../../static/icons/rank.png" optionText="流行排行" subtitle="下载最多的壁纸排行" title="最受欢迎"></header-title>
        <rank-wallpaper-list :list="homeList.hotList"></rank-wallpaper-list>
		<cu-end-empty></cu-end-empty>
	</view>
</template>

<script>
	import navBar from '../../components/nav-bar/nav-bar.vue'
	import headerTitle from '../../components/header-title/header-title.vue'
	import imageScrollView from '../../components/image-scroll-view/image-scroll-view.vue'
	import rowImageList from '../../components/row-image-list/row-image-list.vue'
	import rankWallpaperList from '../../components/rank-wallpaper-list/rank-wallpaper-list.vue'
	import cuEndEmpty from '../../components/cu-end-empty/cu-end-empty.vue'
	export default {

		data() {
			return {
				scrollTop: 0,
				homeList: {
					banner: [],
					chosenWallpaper: [],
					todayHot: [],
					landscapeList: [],
					hotList: [],
					albumList: [],
					swiperheight:350
				}
			}
		},
		methods: {
			toPage:function(url){
				console.log(url)
				uni.navigateTo({url:url})
			},
			getChosenWallpaper:function(page=0,size=20){
				let that = this
				uni.request({
				    url: this.$globals.siteUrl+'/zxjx.php', //仅为示例，并非真实接口地址。
				    success: (res) => {
						console.log("request success");
						var resData = res.data
						if(resData.success && resData.data.code == 200){
							that.homeList.chosenWallpaper = resData.data.data
						}
						console.log(that.homeList)
				    }
				});
			}
		},
		created: function() {
			let that = this
			uni.getSystemInfo({
				success:function(res){
					if(res.windowWidth > 750){
						that.swiperheight = 1024;
					}
				}
			})
			
			uni.createIntersectionObserver(this).relativeToViewport().observe('.top-empty',function(e){
				 if(e.intersectionRatio > 0){
					 that.scrollTop = 0
				 }else{
					 that.scrollTop = 1000
				 }
			})
			uni.request({
			    url: this.$globals.siteUrl+'/index1.php', //仅为示例，并非真实接口地址。
			    success: (res) => {
					console.log("request success");
					var resData = res.data
					if(resData.success && resData.data.code == 200){
						that.homeList.hotList = resData.data.data.hotList
						that.homeList.landscapeList = resData.data.data.landscapeList
						that.homeList.todayHot = resData.data.data.todayHot	
					}
			    }
			});
			uni.request({
			    url: this.$globals.siteUrl+'/index_b.php', //仅为示例，并非真实接口地址。
			    success: (res) => {
					console.log("request success");
					var resData = res.data
					if(resData.success && resData.data.code == 200){
						that.homeList.albumList = resData.data.data
						that.scrollTop = 0;
					}
			    }
			});
			that.getChosenWallpaper()
			console.log(that.homeList)
		},
		components:{
			navBar,headerTitle,imageScrollView,rowImageList,rankWallpaperList,cuEndEmpty
		},
		onPageScroll: function(Object) {
		   //this.scrollTop = Object.scrollTop;
		},
		watch:{
			homeList:function(){
				let that = this
				that.$emit("setSwiperHeight",true)
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.index-page {
    width: 750rpx;
    background-image: url();
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.top-empty {
    width: 750rpx;
    height: 80rpx;
    background-color: transparent;
}

.logo-box-image {
    width: 55rpx;
    height: 55rpx;
}

.album-srcoll-container {
    white-space: nowrap;
    display: flex;
}

.album-item {
    width: 606rpx;
    height: 862rpx;
    background-color: #232323;
    border-radius: 12rpx;
    margin-left: 30rpx;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
	home:1;
}

.album-item:last-of-type {
    margin-right: 30rpx;
}

.album-cover-image {
    width: 606rpx;
    height: 578rpx;
    background: transparent;
    border-radius: 12rpx 12rpx 0 0;
}

.album-title {
    font-size: 34rpx;
    height: 82rpx;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    width: 558rpx;
    margin-left: 24rpx;
}

.album-content {
    font-size: 26rpx;
    height: 70rpx;
    width: 558rpx;
    margin-left: 24rpx;
    color: hsla(0,0%,100%,.4);
    line-height: 36rpx;
    margin-top: 8rpx;
    word-break: keep-all;
    word-wrap: break-word;
    white-space: pre-line;
}

.album-user-box {
    margin-top: 26rpx;
    width: 558rpx;
    -webkit-box-flex: 1;
    flex: 1;
    margin-left: 24rpx;
    border-top: 1px solid rgba(0,0,0,.2);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.album-user-avatar {
    width: 58rpx;
    height: 58rpx;
    border: 6rpx solid #232323;
    border-radius: 50%;
}

.album-user-avatar image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #000;
}

.album-user-avatar:first-of-type {
    z-index: 999;
}

.album-user-avatar:nth-of-type(2) {
    position: relative;
    right: 24rpx;
    z-index: 99;
}

.album-user-avatar:nth-of-type(3) {
    position: relative;
    right: 48rpx;
    z-index: 9;
}

.album-user-tips {
    font-size: 26rpx;
    margin-left: 24rpx;
    color: hsla(0,0%,100%,.4);
    position: relative;
    right: 56rpx;
    z-index: 999;
}
</style>
